<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
    <title>积分兑换</title>
    <link rel="stylesheet" href="css/shop.css">
    <link rel="stylesheet" href="css/weui.min.css">
    <link rel="stylesheet" href="css/jquery-weui.css">
    <script src="js/jquery-2.1.4.js"></script>
    <script src="js/jquery-weui.js"></script>
    <script src="wxJs/utils/contain.js"></script>
    <script src="wxJs/utils/storage.js"></script>

</head>
<style>
    body {
        background: #fff;
    }

    .pay_img {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        margin-right: 10px;
    }

    .pay_top {
        display: flex;
        align-items: center;
        padding: 20px;
        background: #fff;
        justify-content: space-between;
    }

    .pay_top div {
        display: flex;
        align-items: center;
    }

    .pay_top div:last-child {
        color: #1D6CF7;
        font-size: 14px;
    }

    .pay_price {
        display: flex;
        align-items: center;
        height: 40px;
        background: #fff;
        padding-left: 20px;
        border-bottom: solid 1px #e1e1e1;
    }

    .pay_sign {
        font-size: 24px;
        color: #1999DC;
    }

    .price_inner {
        height: 39px;
        border: none;
    }

    .price_inner:focus {
        outline: none;
    }

    .weui-btn_primary {
        margin: 20px 10px;
        text-align: center;
        color: #fff;
        font-size: 16px;
    }

    .model1 {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background-color: rgba(0, 0, 0, .6);
        display: none;
    }

    .model1 * {
        box-sizing: border-box
    }

    .model1-contain {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #fff;
        border-radius: 8px;
        overflow: hidden
    }

    .model1-title {
        width: 100%;
        background-color: #fff;
        border-bottom: 1px solid #d3d3d3;
        text-align: center;
        padding: 15px 0;
        font-weight: 700;
        line-height: 1
    }

    .model1-content {
        border-top: 1px solid #d3d3d3
    }

    .model1-content input[type='password'] {
        padding: 20px;
        text-align: center;
        cursor: none;
        border: none;
        outline: 0;
        font-size: 18px
    }

    .model1-footer {
        display: flex;
        text-align: center;
        border-top: 1px solid #d3d3d3;
        font-size: 16px
    }

    .model1-footer * {
        flex: 1;
        padding: 10px 0;
        cursor: pointer
    }

    .model1-footer .confirm {
        background-color: #ff9c1c;
        color: #fff
    }
</style>

<body ontouchstart>
<div class="header">
    <a class="haader-left" href="javascript:window.history.go(-1)"><i class="iconfont icon-left"></i></a>
    <div class="haader-content">积分兑换</div>
    <div class="haader-right">

    </div>
</div>
<div class="pay_top">
    <div>
        <img src="./images/exchage.png" alt="" class="pay_img">
        <p>积分兑换</p>
    </div>
    <div>
        可用积分：
        <sapn id="jifen"></sapn>
    </div>
</div>
<div class="pay_price">
    <p class="pay_sign">￥</p>
    <input type="text" class="price_inner" placeholder="请输入积分数量" >
</div>
<a class="weui-btn weui-btn_primary" href="javascript:" id="showTooltips" oninput="setNumType(this)">确认兑换</a>
<div class="model1">
    <div class="model1-contain">
        <div class="model1-title">支付密码</div>
        <div class="model1-content">
            <input id="code" type="password" placeholder="请输入支付密码" maxlength="6" oninput="setNumType(this)">
        </div>
        <div class="model1-footer">
            <div class="cancel">取消</div>
            <div class="confirm">确认</div>
        </div>
    </div>
</div>
</body>


<script>
    var userInfo
    var userId = GetQueryString("userId");
    if (!userId) {
        window.history.back(-1);
    } else {
        $('.haader-right').html('<a href="point_exchange.html?userId=' + userId + '"><i class="iconfont icon-lianluojilu" style="font-size: 24px;"></i></a>')
        userInfo = getUserInfo(userId)
        $('#jifen').text(userInfo.jiFen)
    }
    var jf;
    $("#showTooltips").on('click', function () {
        var exchangeJF = $('.price_inner').val()
        if (!exchangeJF || exchangeJF > userInfo.jiFen || exchangeJF == 0) {
            $.toast("请输入正确的积分数量", "forbidden")
            return false;
        } else {
            jf = exchangeJF
        }
        if (!userInfo.payNumber) {
            $.toast("请先设置支付密码", "forbidden")
            return false;
        } else {
            $('.model1').show()
        }
    })

    $(".cancel").on('click', function () {
        $('.model1').hide()
    })

    /*弹出输入框,判断输入字符返回*/
    $(".confirm").on('click', function () {
        var code = $('#code').val()
        if (!code){
            $.toast("请输入密码", "forbidden")
            return false;
        }
        if (code == userInfo.payNumber) {
            $.post(getWeiContextPath() + "/wx/VipUser/toExchange", {wxUserId: userId, exchangeJF: jf}, function (res) {
                if (res.code == 0) {
                    $.toast("兑换成功", function () {
                        window.location.href = 'me.html?userId=' + userId;
                    })
                }
            })
        } else {
            $.toast("密码错误", "forbidden")
        }
    })

    /*只能输入数字*/
    function setNumType(_this) {
        var num = $(_this).val()
        $(_this).val(num.replace(/[^\d]/g,''))

    }
</script>

</html>